import { is2DArray, deepClone } from '@/utils/index';

const radar_basic = ({
  seriesName = '',
  seriesData = [],
  indicatorData = [],
  color = [
    // '#66a6ff',
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de',
    '#3ba272',
    '#fc8452',
    '#9a60b4',
    '#ea7ccc',
  ],
  unit = '',
  radius = [0, '65%'],
  startAngle = 0,
  fontSize = 14,
  showSeriesLabel = false,
  labelColor = 'inherit',
  labelPosition = 'top',
  axisColor = '#333',
  legend = true,
  legendPosition = '',
  cursor = 'auto',
}) => {
  // 系列配置
  let series = [];
  let seriesItemOption = {
    type: 'radar',
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        let content = params.name && `<span>${params.name}</span><br />`;
        params.value.forEach((value, index) => {
          content +=
            `${params.marker}${indicatorData[index].name}&nbsp;&nbsp;` +
            `<span style="font-weight:bold;">${value} ${unit}</span><br />`;
        });
        return content;
      },
    },
    data: [],
    label: {
      show: showSeriesLabel,
      labelPosition: labelPosition,
      fontSize: fontSize,
      color: labelColor,
      fontWeight: 'bold',
      // formatter: function (params) {
      //   return params.value;
      // },
    },
    areaStyle: {
      color: '#5470c6',
    },
  };
  // seriesData为二维数组时,设置多个series
  if (is2DArray(seriesData)) {
    seriesData.forEach((item, index) => {
      const seriesItem = deepClone(seriesItemOption);
      seriesItem.data.push({ value: [], name: '' });
      // 如果 seriesName 是数组 分别设置 name
      if (Array.isArray(seriesName)) seriesItem.data[index].name = seriesName[index];
      else seriesItem.data[index].name = seriesName;
      seriesItem.data.value = item;
      series.push(seriesItem);
    });
    // seriesData为普通数组时,设置一个series
  } else {
    const seriesItem = deepClone(seriesItemOption);
    // 设置系列data
    seriesItem.data = [{ value: seriesData, name: seriesName }];
    series.push(seriesItem);
  }

  const defaultConfig = {
    // animationDuration: 3000,
    tooltip: {
      confine: true,
      trigger: 'axis',
    },
    legend:
      legend &&
      {
        // orient: ['top', 'bottom'].includes(legendPosition) ? 'horizontal' : 'vertical',
        // itemWidth: 35,
        // itemWHeight: 10,
        // top: legendPosition == 'top' ? '0' : legendPosition == 'bottom' ? null : 'center',
        // left: legendPosition == 'left' ? '3%' : legendPosition == 'right' ? null : 'center',
        // right: legendPosition == 'right' ? '3%' : legendPosition == 'left' ? null : 'center',
        // bottom: legendPosition == 'bottom' ? '0' : legendPosition == 'top' ? null : 'center',
        // formatter: function (params) {
        //   return params;
        // },
        // textStyle: {
        //   fontSize: fontSize,
        //   color: labelColor,
        //   rich: {
        //     underline: {
        //       width: 70,
        //       height: 0,
        //       borderWidth: 1,
        //       borderColor: labelColor,
        //     },
        //   },
        // },
        // itemGap: 15,
        // selected: {},
        // tooltip: {
        //   show: true,
        // },
      },
    // grid: {
    //   // top: legend ? '50' : '30',
    //   // left: '4%',
    //   // right: '4%',
    //   // bottom: '10',
    //   // containLabel: true,
    //   top: legend ? '30' : '5',
    //   left: '5',
    //   right: '5',
    //   bottom: '5',
    //   containLabel: true,
    // },
    color: color,
    radar: {
      indicator: indicatorData,
      center: ['50%', '50%'],
      radius: radius,
      startAngle: startAngle,
      splitNumber: 5,
      shape: 'circle',
      axisName: {
        fontSize: fontSize,
        color: axisColor,
      },
    },
    series: series,
  };

  const opt = deepClone(defaultConfig);
  return opt;
};

export default {
  radar_basic,
};
